<template>
  <a-card style="height: 100%;position: relative" class="pageView">
    <div class="box1" v-if="queryParam.keyWords ===''">
      <p style="margin-bottom:55px;color:#0168b7;text-align: center;font-size: 35px">审计案例查询</p>
      <a-input-search
        placeholder="请输入关键字"
        size="large"
        @search="onSearch">
        <a-button icon="search" slot="enterButton">
          搜索
        </a-button>
      </a-input-search>
    </div>
    <div class="box2" v-else>
      <a-input-group compact>
        <a-input-search
          size="large"
          v-model="queryParam.keyWord"
          style="width: 40%"
          placeholder="请输入关键字"
          @search="onSearch">
          <a-button icon="search" slot="enterButton">
            搜索
          </a-button>
        </a-input-search>
      </a-input-group>

      <div class="searchView">
        <a-divider class="divider">搜索结果</a-divider>
        <div style="background-color: white;padding:2px">
          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            @change="handleTableChange">
            <span slot="wtms" slot-scope="text">
              <j-ellipsis :value="text" :length="20"/>
            </span>
            <span slot="dingxing" slot-scope="text">
              <j-ellipsis :value="text" :length="20"/>
            </span>
            <span slot="dxyj" slot-scope="text">
              <j-ellipsis :value="text" :length="20"/>
            </span>
            <span slot="action" slot-scope="text, record">
              <a @click="onCheck(record)">查看</a>
            </span>
          </a-table>
        </div>
        <a-modal :footer="null" v-model="visible" title="详情">
          <p><b>问题表现形式：</b> {{content.wtms}}</p>
          <p><b>定性：</b>{{content.dingxing}}</p>
          <p><b>定性法规依据：</b>{{content.dxyj}}</p>
        </a-modal>
      </div>
    </div>
  </a-card>
</template>

<script>
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import columns from './indexColumns'

  export default {
    name: "案例查询",
    mixins: [JeecgListMixin],
    components: {},
    data() {
      return {
        visible: false,
        queryParam: {
          keyWords: '',
          cate: '-1'
        },
        content: {},
        columns: columns(this),
        loading: false,
        url: {
          list: '/sjal/sjWorkZtfaCase/queryAdvanceInfo'
        }
      }
    },
    methods: {
      onCheck(data) {
        this.content.wtms = data.wtms
        this.content.dingxing = data.dingxing
        this.content.dxyj = data.dxyj
        this.visible = true
      },
      onSearch(val) {
        this.queryParam.keyWords = val
        this.loadData(1);
      }
    }
  }
</script>

<style scoped>
  .divider::after, .divider::before {
    border-top: 1px solid #a8d7ff !important;
  }

  .divider {
    color: #3498db;
  }

  .pageView {
    background: url(~@/assets/search-view.png) no-repeat;
    background-size: 100% 100%;
  }

  .searchView {
    width: 80%;
    padding: 0px 20px 20px 20px;
    margin: 0 auto;
    margin-top: 35px;

  }

  .searchView .list {
    overflow: auto;
    height: calc(100vh - 360px)
  }

  ul, li {
    list-style: none;
    text-decoration: none;
    padding: 0;
  }

  li {
    border-bottom: 1px dashed #c2c2c2;
  }

  .box1 {
    width: 550px;
    height: 100px;
    position: absolute;
    top: -45%;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }

  .box2 {
    margin-top: 20px;
    width: 100%;
    height: 100px;
    text-align: center;

  }
</style>